<template>
    <div class="login-container">
        <div class="login-box">
            <div class="box-trans">
            <img src="./logo_index.png" alt="#">
            <!-- 利用 :rules 属性绑定验证form表单 -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginForRules">
                <!-- 利用prop属性连接校验规则 -->
                <el-form-item prop="mobile">
                    <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
                      <i slot="prefix" class="iconfont icon-shouji"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="loginForm.code" placeholder="请输入验证码">
                      <!-- slot插槽  profix在input前面插入   suffix在后面插入 -->
                      <i slot="prefix" class="iconfont icon-yanzhengma"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="xieyi">
                    <el-checkbox v-model="loginForm.xieyi"></el-checkbox>
                    <span>我已阅读并同意用户协议和隐私条款</span>
                </el-form-item>
                <el-form-item>
                    <el-button style="width:100%;" type="primary" @click="login()" v-loading="btnLoading" :disabled="btnLoading">登录</el-button>
                </el-form-item>
            </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import '@/assets/js/gt.js'
import '@/assets/font/iconfont.css'
export default {
  data () {
    // 自定义手机验证规则
    var checkMobile = (rule, value, callback) => {
      // value 是被验证的手机号码
      // callback 是回调函数，无论是否成功都会执行
      // 正则表达式： [3,9]表示一个3-9的数，{9}表示前面的\d数字共计9个
      var reg = /^1[3-9]\d{9}$/
      // 正则表达式调用reg.test(value) 进行验证 返回true验证通过，返回false验证不通过
      if (!reg.test(value)) {
        // 验证不通过  return 返回错误信息  new Error('XXX')
        return callback(new Error('手机号码格式不正确'))
      }
      callback()
    }
    // 自定义协议验证规则
    var checkxieyi = (rule, value, callback) => {
      // value值为复选框返回值  true或false
      if (!value) {
        return callback(new Error('请遵守协议'))
      }
      callback()
    }
    return {
      loginForm: {
        mobile: '', // 手机号码
        code: '', // 校验码
        xieyi: false // 协议,

      },
      btnLoading: false,
      captchaObject: null,
      loginForRules: {
        mobile: [
          { required: true, message: '手机必填', trigger: 'blur' },
          // validator 封装jquery中的validate插件进行表单验证   blur是失去焦点验证
          { validator: checkMobile, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码必填', trigger: 'blur' }
        ],
        xieyi: [
          { validator: checkxieyi }
        ]
      }
    }
  },
  methods: {
    loginAct () {
      this.$http.post('/authorizations', this.loginForm)
        .then((result) => {
          console.log(result)
          var { id, name, photo, token } = result.data.data
          // 将id 、name、 photo、 token值放入sessionStorage中
          // token 是服务端返回的32位加密串即令牌，有2小时的时效性，是判断是否登录的唯一依据
          window.sessionStorage.setItem('id', id)
          window.sessionStorage.setItem('name', name)
          window.sessionStorage.setItem('photo', photo)
          window.sessionStorage.setItem('token', token)
          this.$router.push({ name: 'home' })
        })
        .catch((err) => {
          console.log(111, err)
        })
    },
    login () {
      // 使用validate()方法验证登录信息是否正确  发送axios请求，成功跳转页面，失败返回消息
      // el-form组件对象是  vueComponent对象
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          // valid为true验证成功  发送ajax请求
          // axios获得极验的验证信息
          if (this.captchaObject !== null) {
            return this.captchaObject.verify()
          }
          //   this.$http.post('/authorizations', this.loginForm)
          // 使得登录按钮变为等待状态
          this.btnLoading = true
          this.$http.get(`/captchas/${this.loginForm.mobile}`)
            .then((result) => {
              console.log(result)
              // result获得极验数据

              // 将resule返回值中data.data中id、name、photo、token值放入sessionStorage中存储
              // 利用对象赋值解析，把需要的值解析为变量
              //   var { id, name, photo, token } = result.data.data
              var { data } = result.data
              // 将id 、name、 photo、 token值放入sessionStorage中
              // token 是服务端返回的32位加密串即令牌，有2小时的时效性，是判断是否登录的唯一依据
              //   window.sessionStorage.setItem('id', id)
              //   window.sessionStorage.setItem('name', name)
              //   window.sessionStorage.setItem('photo', photo)
              //   window.sessionStorage.setItem('token', token)
              //   this.$router.push({ name: 'home' })
              // 请检测data 的数据结构，保证data.gt  data.challenge  data.success有值
              window.initGeetest({
                // 以下配置参数来自服务端SDK
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                product: 'bind' // 隐藏长条按钮，直接通过“提交”按钮激活交互页面
              }, captchaObj => {
                // 这里可以调用验证实例 captchaObj 的实例方法
                captchaObj.onReady(() => {
                  // 验证码ready之后才能调用verify方法“显示人机交互验证码”
                  this.captchaObject = captchaObj
                  captchaObj.verify() // 显示验证码
                  this.btnLoading = false
                }).onSuccess(() => {
                  // 验证成功处理  校验账号，登录系统
                  this.loginAct()
                }).onError(() => {
                  // 验证失败处理
                })
              })
            })
            .catch((err) => {
              console.log(111, err)
              return this.$message.error('获取极验验证码错误')
            })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
    .login-container{
        height:100%;
        background: url('./login_bg.jpg') center center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;

        .login-box{
            width:410px;
            height:345px;
            background-color: #DDA0DD;
            // padding:80px 60px;
            display: flex;
            justify-content: center;
            border-radius: 14px;
            .box-trans {
                width: 75%;
                text-align: center;
                img{
                    width: 64%;
                    margin: 20px 0;
                }
            }
            .el-form{
                width: 100%;

            }
        }
    }
</style>
